<!DOCTYPE html>
<html>
<head>
    <title>办证预约主界面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/jmdf.css" media="all">
    <style>
        .footer {
            color: inherit;
            border: 1px solid #e7eaec;
            background: #f5f5f6;
            padding: 5px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            text-align: center;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <#setting number_format="#.##">
</head>
<body>
<div class="layui-fluid">
    <form class="layui-form">
        <div class="layui-card">
            <div class="layui-card-header">一、被征收人基本信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <div class="layui-col-xs12">
                        征收项目：${(contract.zsProject.projectName)!}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-xs12">
                        协议编号：${(contract.contractCode)!}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-xs12">
                        选房顺序号：${(contract.chooseHouseNum)!}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-xs12">
                        被征收人：${(contract.name)!}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-xs12">
                        身份证号：${(contract.idCard)!}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-xs12">
                        总可选房面积：【<span class="jmdf-color-red">${(contract.limitHouseAreaTotal)!}</span>】㎡
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                二、已选房源列表
            </div>
            <div class="layui-card-body">
                <table class="layui-table" lay-filter="layFilter" id="yxHouseTable"></table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                三、已选车位列表
            </div>
            <div class="layui-card-body">
                <table class="layui-table" lay-filter="layFilter" id="yxCarLotTable"></table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                四、预约办证【每天30户】
            </div>
            <div class="layui-card-body">
                <#if contract.bzYyStatus?? && contract.bzYyStatus ==1>
                    <div id="buttonContainer">
                        <table style="width: 100%;text-align: center">
                            <#if dateListStr??>
                                <#list dateListStr as map>
                                    <tr style="height: 45px">
                                        <td width="100%" type="button" class="layui-btn myButton <#if map?? && map['date']?? && map['time']?? && getBzYyNumMap?? && getBzYyNumMap[map['date'] + "_" + map['time']]?? && getBzYyNumMap[map['date'] + "_" + map['time']] = '15'>layui-btn-disabled</#if>" date="${(map['date'])!}" time="${(map['time'])!}">${(map['date'])!}${(map['time'])!}(已预约${(getBzYyNumMap[map['date'] + "_" + map['time']])!0}户)</td>
                                    </tr>
                                </#list>
                            </#if>
                        </table>
                    </div>
                </#if>
                <#if contract.bzYyStatus?? && contract.bzYyStatus ==2>
                    <table style="width: 100%;text-align: center">
                        <tr style="height: 45px">
                            <td width="100%">
                                <span style="color: red">*您的预约时间是${(contract.bzYyDate?string("yyyy年MM月dd日"))!}-${(contract.time)!}*</span>
                            </td>
                        </tr>
                    </table>
                </#if>

            </div>
        </div>
    </form>
</div>
<#--预选房源信息展示-->
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<!--菜单-->
<script type="text/html" id="yxHouseTable_toolbar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="yxHouseTable_delete"><i
                class="layui-icon layui-icon-delete"></i>撤销</a>
</script>
<!--菜单-->
<script type="text/html" id="yxHouseTable_toolbar"></script>

    <#--预选车位信息展示-->
    <script type="text/html" id="indexTplCarLot">
        {{d.LAY_TABLE_INDEX+1}}
</script>
<!--菜单-->
<script type="text/html" id="yxCarLotTable_toolbar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="yxCarLotTable_delete"><i
                class="layui-icon layui-icon-delete"></i>撤销</a>
</script>
<!--菜单-->
<script type="text/html" id="yxCarLotTable_toolbar">



</script>
<script src="/layui/layui.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/modules/' //静态资源所在路径
    }).use(['jquery', 'jmdf', 'form', 'table', 'layer'], function () {
        var $ = layui.jquery, jmdf = layui.jmdf, form = layui.form, layer = layui.layer, table = layui.table,
            parentIndex = parent.layer.getFrameIndex(window.name);

        //预选房源信息列表
        var cols = [[
            {title: "序号", toolbar: '#indexTpl', type: "numbers", fixed: 'left', align: 'center'}
            , {field: "houseInfo", title: "房屋信息", align: 'center'}
        ]];

        //加载预选房源列表
        var options = {
            elem: '#yxHouseTable' //table列表id值
            , url: "loadChooseHouseInfo?contractId=${(contract.id)!}"
            <#--, url: "loadYxHouseInfo?contractId=${(encodedContractId)!}"-->
            , cols: cols
            , id: "renderId"
        };
        table.render(options);

        //预选车位信息列表
        var colsCarLot = [[
            {title: "序号", toolbar: '#indexTplCarLot', type: "numbers", fixed: 'left', align: 'center'}
            , {field: "carLotInfo", title: "车位信息", align: 'center'}
        ]];
        //加载预选房源列表
        var options = {
            elem: '#yxCarLotTable' //table列表id值
            , url: "loadChooseCarLotInfo?contractId=${(contract.id)!}"
            <#--, url: "loadYxCarLotInfo?contractId=${(encodedContractId)!}"-->
            , cols: colsCarLot
            , id: "renderCarLotId"
        };
        table.render(options);
        function reloadSelectYxHouseInfo() {
            table.reload("renderId", {});
        };

        function reloadSelectYxCarLotInfo() {
            table.reload("renderCarLotId", {});
        };

        window.reloadSelectYxHouseInfo = reloadSelectYxHouseInfo;
        window.reloadSelectYxCarLotInfo = reloadSelectYxCarLotInfo;

        /******************预约信息保存*********************/
        var container = document.getElementById('buttonContainer');
        container.addEventListener('click', function(event) {
            var bzYyDate;
            if (event.target.classList.contains('myButton')) {
                bzYyDate = event.target.getAttribute('date');//得到选择预约的时间
                timeStr = event.target.getAttribute('time');//得到选择预约的时间

            };
            if (bzYyDate != undefined && bzYyDate != "") {
                layer.open({
                    title: '预约办证情况',
                    content: '您预约办证时间是'+ bzYyDate +'，需您合理安排时间前去办理，若无问题请点击确定！！',
                    yes: function() {
                        $.ajax({
                            url: 'bzYySave',
                            type: 'post',
                            data: {
                                contractId: ${(contract.id)!},
                                bzYyDate: bzYyDate,
                                time: timeStr,
                                _time: new Date().getTime()
                            },//当前容器的全部表单字段，名值对形式：{name: value}
                            success: function (msg) {
                                if (msg == "1111") {
                                    layer.msg(JSON.stringify("您已经预约过，无法重复预约！！"));
                                }else if (msg == "0000") {
                                    layer.msg(JSON.stringify("当天预约已满，请查看时间段进行预约！！"));
                                } else if (msg == "6666"){
                                    layer.msg(JSON.stringify("您已预约成功，请在"+bzYyDate+timeStr+"当天合理安排时间前去办理！！"));
                                    var contractId = ${(contract.id)!};
                                    var encodedContractId = btoa(contractId); // Base64编码
                                    location.href = "bzYyMain?DF-TF-ST=" + encodeURIComponent(encodedContractId);
                                } else {
                                    layer.msg(JSON.stringify("其它原因无法预约，请联系技术人员！！"));
                                }
                            }
                        });
                    },
                    no: function() {
                        // 用户点击了取消，不执行任何操作
                    }
                });
            }
            return false;
        });

        form.render();
    });
</script>
</body>
</html>